<template>
    <el-row>
        <!--
        数组更新检测
        -->
        <el-row class="el-col-5">
            <el-button type="success" @click="clMsgPush()">push</el-button>
            <el-button type="success" @click="clMsgPop()">Pop</el-button>
            <el-button type="success" @click="clMsgShift()">Shift</el-button>
            <el-button type="success" @click="clMsgUnshift()">Unshift</el-button>
            <el-button type="success" @click="clMsgSplice()">Splice</el-button>
            <el-button type="success" @click="clMsgReverse()">Reverse</el-button>
            <ul>
                <!--
                    1、v-for循环
                -->
                <li v-for="item in items" v-bind:key="item">
                    {{ item.msg }}
                </li>
            </ul>
            <el-button type="success" @click="clMsgSort()">Sort</el-button>
            <ul>
                <!--
                    1、v-for循环
                -->
                <li v-for="item in itemSort" v-bind:key="item">
                    {{ item.xyz }}
                </li>
            </ul>
        </el-row>

        <el-row class="el-col-5">
            <hr>
            <el-button type="success" @click="isRefresh">刷新页面</el-button>
            <div v-if="Math.random() > 0.5">
                你看不见我了吧！！！
            </div>
            <div v-else>
                你居然能看见我！！！
            </div>
        </el-row>

        <el-row class="el-col-5">
            <div>组件</div>
            <txtz :init="init">{{ textZ.zjf }}</txtz>
        </el-row>
    </el-row>
</template>

<script>
    import txtz from './study'
    export default {
        name: "home2",
        data() {
            return{
                msg:'点击按钮',
                items:[
                    {msg:'123'},
                    {msg:'456'},
                    {msg:'789'}
                ],
                itemSort:[
                    {xyz:5},
                    {xyz:3},
                    {xyz:9},
                    {xyz:2},
                    {xyz:4}
                ],
                textZ:[]
            }
        },
        components: {
            txtz
        },
        created(){
            // created生命周期，在实例已经创建完成，页面还没渲染时调用init方法。
            this.init();
        },
        methods:{
            init(){
                this.textZ = this.textZ.push({"zjf":123})
            },
            clMsgPush(){
                //往数组添加元素，方法可向数组的末尾添加一个或多个元素，并返回新的长度。
                let num = (Math.random() * 1000)+"";
                this.items.push({msg:num.substring(0,num.indexOf("."))});
                console.log(this.items);
            },
            clMsgPop(){
                //方法用于删除并返回数组的最后一个元素。
                this.items.pop();
                console.log(this.items);
            },
            clMsgShift(){
                //方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。(下标从0开始。返回第1个。)
                this.items.shift();
                console.log(this.items);
            },
            clMsgUnshift(){
                //方法可向数组的开头添加一个或更多元素，并返回新的长度。
                let num = (Math.random() * 1000)+"";
                this.items.unshift({"msg":num.substring(0,num.indexOf("."))});
                console.log(this.items);
            },
            clMsgSplice(){
                //splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
                this.items.splice(1,1);
                console.log(this.items);
            },
            clMsgSort(){
                //对数组的元素进行排序。
                this.itemSort.sort(this.arraySort('xyz'));
                console.log(this.items);
            },
            arraySort(property) {
                return function (a, b) {
                    var value1 = a[property]
                    var value2 = b[property]
                    return value1 - value2
                }
            },
            clMsgReverse(){
                //方法用于颠倒数组中元素的顺序。
                this.items.reverse();
                console.log(this.items)
            },
            isRefresh(){
                //刷新页面
                location. reload();
                //this.$router.go(0)
            },
            addNewTodo(){
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        },
        watch:{
            msg:function (val) {
                console.log("val:"+val);
                this.items.push({msg:'qwe'});
            }
        }
    }
</script>

<style scoped>

</style>